<!DOCTYPE html>
<html style="background: #fff;">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta charset="UTF-8">
    <title>我的志愿者</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script type="text/javascript" src="js/flexible.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
        .me-tab{
            display: flex;
        }
        .me-tab .tab-item{
            flex: 1;
            flex-wrap: wrap;
            flex-direction: row;
        }
        .me-tab .tab-item span{
            display: block;
            width: 60%;
            height: 1.133rem;
            text-align: center;
            margin: 0 auto;
            font-size: 0.48rem;
        }
        .tab-active{
            box-shadow: 0 0.04rem 0 #6ea1ef;
            color: #6ea1ef;
        }

    </style>
</head>
<body style="background:none;">

<div class="me-form-box me-tab" style="background:#fff;">
    <div class = "tab-item"><span class = "tab-active">学生</span></div>
    <div class = "tab-item"><span>导师</span></div>
    <div class = "tab-item"><span>机构</span></div>
    <div class = "tab-item"><span>学校</span></div>
</div>

</body>
<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
    $(".tab-item").click(function(){
        var active=$(this).children().hasClass("tab-active");
        if(!active){
            $(".swiper-slide").removeClass("active3");
            $(this).addClass("active3");
            var type=$(this).attr("data-type");
            $(".showS").hide();
            $("#show"+type).show();
        }
    })
</script>
</html>
